<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Demo</title>
  <link rel="stylesheet" href="//unpkg.com/github-markdown-css@2.9.0/github-markdown.css" />
  <style>
    body {
      margin: 0;
      padding: 50px;
      background: #EEE;
    }

    .next-demo-links {
      margin: 0;
      padding: 0;
      width: 300px;
      list-style: none;
      position: fixed;
      top: 50px;
      right: 50px;
      background: #FFF;
      border: 1px solid #C4C6Cf;
      border-radius: 3px;
      overflow-y: auto;
      max-height: 500px;
    }

    .next-demo-links li {
      line-height: 30px;
      padding: 0 10px;
    }

    .next-demo-links li.title {
      background: #7F00E0;
      color: #fff;
    }

    .next-demo-links li.title + li {
      border-top: none;
    }

    .next-demo-links li + li {
      border-top: 1px solid #C4C6Cf;
    }

    .next-demo-links a {
      color: #333;
      text-decoration: none;
    }

    .next-demo-links a.current {
      color: #7F00E0;
    }

    .next-demo-section {
      position: relative;
      padding: 20px;
      margin-right: 350px;
      margin-bottom: 30px;
      border-radius: 3px;
      background: #FFF;
    }

    #next-demo-reloading {
      display: none;
      position: absolute;
      top: 20px;
      right: 20px;
      width: 120px;
      height: 30px;
      line-height: 30px;
      text-align:center;
      font-size: 14px;
      color: #fff;
      background: #7F00E0;
      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.32);
      border-radius: 3px;
    }

    .markdown-body .highlight pre, .markdown-body pre {
      background: #fff;
    }

    .hljs {
      display: block;
      overflow-x: auto;
      background: #fff;
    }

    .hljs-comment,
    .hljs-quote {
      color: #998;
      font-style: italic;
    }

    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-subst {
      color: #333;
      font-weight: bold;
    }

    .hljs-number,
    .hljs-literal,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-tag .hljs-attr {
      color: #008080;
    }

    .hljs-string,
    .hljs-doctag {
      color: #d14;
    }

    .hljs-title,
    .hljs-section,
    .hljs-selector-id {
      color: #900;
      font-weight: bold;
    }

    .hljs-subst {
      font-weight: normal;
    }

    .hljs-type,
    .hljs-class .hljs-title {
      color: #458;
      font-weight: bold;
    }

    .hljs-tag,
    .hljs-name,
    .hljs-attribute {
      color: #000080;
      font-weight: normal;
    }

    .hljs-regexp,
    .hljs-link {
      color: #009926;
    }

    .hljs-symbol,
    .hljs-bullet {
      color: #990073;
    }

    .hljs-built_in,
    .hljs-builtin-name {
      color: #0086b3;
    }

    .hljs-meta {
      color: #999;
      font-weight: bold;
    }

    .hljs-deletion {
      background: #fdd;
    }

    .hljs-addition {
      background: #dfd;
    }

    .hljs-emphasis {
      font-style: italic;
    }

    .hljs-strong {
      font-weight: bold;
    }

    #toggle-rtl {
        position: absolute;
        top: 20px;
        right: 280px;
        height: 20px;
        background: #fff;
    }

    .next-demo-dir {
        position: absolute;
        top: 20px;
        right: 160px;
        width: 100px;
        height: 20px;
        line-height: 20px;
        background: #fff;
        border: 1px solid #C4C6Cf;
    }

    .next-demo-lang {
      position: absolute;
      top: 20px;
      right: 50px;
      width: 100px;
      height: 20px;
      line-height: 20px;
      background: #fff;
      border: 1px solid #C4C6Cf;
    }

    .next-demo-change-lang-loading {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 999;
      width: 200px;
      height: 60px;
      margin-top: -100px;
      margin-left: -30px;
      line-height: 60px;
      text-align:center;
      font-size: 14px;
      color: #fff;
      background: #7F00E0;
      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.32);
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <ul class="next-demo-links">
  <% links.forEach(function(link) {%>
    <li class="<%= link.href ? '' : 'title' %>">
      <% if (link.filename === name) { %>
        <a class="current" href="/<%= link.href %>">
      <% } else if (link.href){ %>
        <a href="/<%= link.href %>">
      <% } else {%>
        <span>
      <% } %>

        <% if (lang === 'zh') { %>
          <%= link.title %>
          <em><%= link.filename %></em>
        <% } else { %>
          <em><%= link.filename || link.title %></em>
        <% } %>

      <% if (link.href) { %>
        </a>
      <% } else {%>
        </span>
      <% } %>
    </li>
  <% })%>
  </ul>
  <button id="toggle-rtl">toggle mount-node</button>
  <% if (dir === 'rtl') { %>
  <select class="next-demo-dir" aria-label="请选择方向">
      <option value="rtl" selected>rtl</option>
      <option value="ltr">ltr</option>
  </select>
  <% } else { %>
  <select class="next-demo-dir" aria-label="Please select a direction">
      <option value="rtl">rtl</option>
      <option value="ltr" selected>ltr</option>
  </select>
  <% } %>

  <% if (lang === 'zh') { %>
  <select class="next-demo-lang" aria-label="请选择语言">
      <option value="zh" selected>中文</option>
      <option value="en">English</option>
  </select>
  <% } else { %>
  <select class="next-demo-lang" aria-label="Please select a language">
    <option value="zh">中文</option>
    <option value="en" selected>English</option>
  </select>
  <% } %>
  <div class="next-demo-change-lang-loading">
    Changing ...
  </div>
  <script>
    (function() {
        var toggleRtlBtn = document.querySelector('#toggle-rtl');

        toggleRtlBtn.addEventListener('click', function (){
            var mountNode = document.querySelector('#mount-node');
            if (mountNode.dir === 'rtl') {
                mountNode.dir = 'ltr';
            } else {
                mountNode.dir = 'rtl';
            }
        });

        var langSelect = document.querySelector('.next-demo-lang');
        langSelect.addEventListener('change', function(e) {
          var newLang = e.target.value;
          document.querySelector('.next-demo-change-lang-loading').style.display = 'block';
          getJson({
            url: '/changeLang.json',
            data: { lang: newLang },
            error: function(error) {
              console.log('change language failed: ' + error);
            }
          });
        });

        var dirSelect = document.querySelector('.next-demo-dir');
        dirSelect.addEventListener('change', function(e) {
          var newDir = e.target.value;
          document.querySelector('.next-demo-change-lang-loading').style.display = 'block';
          getJson({
            url: '/changeDir.json',
            data: { dir: newDir },
            error: function(error) {
              console.log('change dir failed: ' + error);
            }
          });
        });

        function getJson(options) {
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
              if (xhr.status >= 200 && xhr.status < 400) {
                if (options.success) {
                  options.success(JSON.parse(xhr.responseText));
                }
              } else {
                if (options.error) {
                  var html = xhr.responseText;
                  var div = document.createElement('div');
                  div.innerHTML = html;
                  var text = div.textContent.trim();
                  options.error(text);
                }
              }
            }
          }
          if (options.data) {
            options.url += '?' + Object.keys(options.data).map(function(key) {
             return key + '=' + options.data[key]
            }).join('&');
          }
          xhr.open('GET', options.url, true);
          xhr.send();
        }
      })();
  </script>
